<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        .panel {
            position:absolute;
            left: 0;
            top: 0;
            background:rgba(0, 0, 0, 0.5);
            padding: 10px;
            width: 200px;
        }
    </style>
</head>
<body>

    <div id="map"></div>
    <canvas id="canvas"></canvas>
    <div class="panel">
        <input type="text" id="boundaryTxt" value="北京,天津,河北"/>
        <input type="button" value="添加边界" id="addBoundaryBtn"/>
    </div>

    <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });    // 创建Map实例
        map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": {
                        "lightness": 61,
                        "saturation": -100
                    }
                },
                {
                    "featureType": "road",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        });


        $.get('data/drive.txt', function(result) {

            var options = {
                zIndex: 10,
                lineWidth: 3,
                strokeStyle: 'red',
                shadowClor: 'red',
                shadowBlur: 10,
                draw: 'simple'
            }

            result = result.split("\n");
            var data = [];
            for (var i = 0; i < result.length; i++) {
                var item = result[i];
                var lineStr = item.split(',');
                var coordinates = [];
                for (var j = 0; j < lineStr.length; j += 2) {
                    coordinates.push([lineStr[j], lineStr[j + 1]]);
                }

                data.push({
                    geometry: {
                        type: 'LineString',
                        coordinates: coordinates
                    }
                });
            }
            var dataSet = new mapv.DataSet(data);

            var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

        });


        $('#addBoundaryBtn').bind('click', function () {
            var boundaryTxt = $('#boundaryTxt').val();
            if (boundaryTxt) {
                boundaryTxt = boundaryTxt.split(',');
                for (var i = 0; i < boundaryTxt.length; i++) {
                    getBoundary(boundaryTxt[i]);
                }
            }
        });

        var bdData = [];

        function getBoundary(cityname){
            var bdary = new BMap.Boundary();
            bdary.get(cityname, function(rs){ // 异步加载
                var boundary = rs.boundaries[0];
                boundary = boundary.split(";");
                var coordinates = [];
                for (var i = 0; i < boundary.length; i++) {
                    boundary[i] = boundary[i].split(",");
                    coordinates.push(boundary[i]);
                }

                bdData.push({
                    geometry: {
                        type: 'LineString',
                        coordinates: coordinates
                    }
                });
                bdDataSet.set(bdData);
                console.log(bdDataSet);
            });
        }

        var bdOptions = {
            globalAlpha: 0.9,
            fillStyle: 'rgba(50, 50, 255, 0.05)',
            lineWidth: 2,
            bigData: 'LineString',
            strokeStyle: 'rgba(1, 161, 215, 0.8)',
            max: 100,
            draw: 'simple'
        }


        var bdDataSet = new mapv.DataSet(bdData);

        var mapvLayer = new mapv.baiduMapLayer(map, bdDataSet, bdOptions);

</script>
	
</body>
</html>
